<template>
  <div>
    <div class="hande">
      <el-row justify="space-between" type="flex">
        <el-col>
          <span class="text">说明:目前支持学科和关键字条件筛选</span>
        </el-col>
        <el-col>
          <el-row justify="end" type="flex">
            <el-col :span="3.5" />
            <el-col :span="3.5">
              <el-button icon="el-icon-edit" size="small" type="success" @click="fnn">新增试题</el-button>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </div>
    <el-form label-width="80px">
      <el-row :gutter="10">
        <el-col :span="6">
          <el-form-item label="学科">
            <el-select v-model="subjectsvalue" placeholder="请选择" style="width:100%" @change="subjectsvaluefn">
              <el-option v-for="item in subjectsList" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="二级目录">
            <el-select placeholder="请选择" style="width:100%" value="aaa">
              <el-option label="暂无数据" value="aaa" />
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="标签">
            <el-select v-model="tagsvalue" placeholder="请选择" style="width:100%">
              <el-option v-for="item in tagsList" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="关键字">
            <el-input v-model="keyword" placeholder="根据题干搜索" style="width:100%" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="6">
          <el-form-item label="试题类型">
            <el-select v-model="Typevalue" placeholder="请选择" style="width:100%">
              <el-option v-for="item in questionType" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="难度">
            <el-select v-model="difficultyvalue" placeholder="请选择" style="width:100%">
              <el-option v-for="item in difficulty" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="方向">
            <el-select v-model="directionvalue" placeholder="请选择" style="width:100%">
              <el-option v-for="item in direction" :key="item" :label="item" :value="item" />
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="录入人">
            <el-select v-model="dataEntryClerkValue" placeholder="请选择" style="width:100%">
              <el-option v-for="item in dataEntryClerk" :key="item" :label="item" :value="item" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="6">
          <el-form-item label="题目备注">
            <el-input v-model="remarkValue" style="width:100%" />
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="企业简称">
            <el-input v-model="abbreviationValue" style="width:100%" />
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="城市">
            <el-row>
              <el-col :span="12">
                <el-select v-model="cityListvalue" placeholder="请选择" style="width:100%" @change="eidtcity">
                  <el-option v-for="item in cityList" :key="item" :label="item" :value="item" />
                </el-select>
              </el-col>
              <el-col :span="12">
                <el-select v-model="prefecturelevelValue" placeholder="请选择" style="width:100%">
                  <el-option v-for="item in prefecturelevel" :key="item" :label="item" :value="item" />
                </el-select>
              </el-col>
            </el-row>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item>
            <el-button @click="delernFn">清除</el-button>
            <el-button type="primary" @click="searchFn">搜索</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { simple } from '@/api/hmmm/subjects'
import { choice } from '@/api/hmmm/questions'
import { list } from '@/api/hmmm/questions'
import { simple as simpletags } from '@/api/hmmm/tags'
import { difficulty, questionType, direction } from '@/api/hmmm/constants'
import { provinces, citys } from '@/api/hmmm/citys'
export default {
  props: {
    obj: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      subjectsList: [], // 学科列表
      subjectsvalue: '',
      subjectID: null,
      tagsList: [], // 标签列表
      keyword: '', // 关键字
      tagsvalue: '',
      questionType, // 题目类型
      Typevalue: '',
      difficulty, // 难度
      difficultyvalue: '',
      direction, // 方向
      directionvalue: '',
      cityList: [], // 城市列表
      cityListvalue: '',
      prefecturelevel: [], // 地级市
      prefecturelevelValue: '',
      dataEntryClerk: ['超级管理员', '录入管理员'],
      dataEntryClerkValue: '',
      remarkValue: '', // 题目备注
      abbreviationValue: '' // 企业简称
    }
  },
  created() {
    this.simple()
    this.simpletags()
    this.provinces()
  },
  methods: {
    // 获取学科列表
    async simple() {
      const { data } = await simple()
      this.subjectsList = data
    },
    // 获取标签列表
    async simpletags() {
      const { data } = await simpletags()
      this.tagsList = data
    },
    // 学科选择改变事件
    async subjectsvaluefn(id) {
      this.subjectID = id
    },
    // 过滤出城市列表
    provinces() {
      this.cityList = provinces()
    },
    // 过滤出地级市列表
    eidtcity(value) {
      this.cityListvalue = value
      this.prefecturelevel = citys(this.cityListvalue)
    },
    // 清空事件
    delernFn() {
      this.subjectsvalue = ''
      this.subjectID = null
      this.keyword = '' // 关键字
      this.tagsvalue = ''
      this.Typevalue = ''
      this.difficultyvalue = ''
      this.directionvalue = ''
      this.cityListvalue = ''
      this.prefecturelevelValue = ''
      this.dataEntryClerkValue = ''
      this.remarkValue = ''
      this.abbreviationValue = ''
      this.obj.subjectID = null
      this.obj.keyword = ''
      this.obj.page = 1
      this.$emit('Choice', this.obj)
    },
    // 搜索事件
    async searchFn() {
      if (this.obj.page === 2) {
        this.obj.page = 1
      }
      if (this.obj.flag === 1) {
             this.$parent.listLoading = true;

        this.obj.subjectID = this.subjectID
        this.obj.keyword = this.keyword
        const {
          data: { items }
        } = await list(this.obj)
        this.$emit('questions', items)
      } else {
        this.obj.subjectID = this.subjectID
        this.obj.keyword = this.keyword
        const {
          data: { items }
        } = await choice(this.obj)
        this.$emit('searchfn', items)
      }
      this.obj.subjectID = this.subjectID
      this.obj.keyword = this.keyword
      const {
        data: { items }
      } = await choice(this.obj)
      this.$emit('searchfn', items)
    },
    fnn() {
      this.$router.push('./new')
    }
  }
}
</script>

<style>
.text {
    font-size: 12px;
    color: pink;
}
.is-justify-end {
    padding-bottom: 5px;
}
</style>
